<template>
    <div class="nav">
        <div class="logo">
            <img src="@/assets/forum/logo.png" alt="">
        </div>
        <div class="search">
            <input type="text" v-model="searchQuery" @input="search" placeholder="搜索感兴趣的内容">
            <!-- <ul v-if="searchResults.length">
                <li v-for="(result, index) in searchResults" :key="index">{{ result }}</li>
            </ul>
            <p v-else>No results found.</p> -->
            <el-icon size="1.5vw"><Search /></el-icon>
        </div>
        <div class="user">
            <button type="button" title="个人主页" @click="ShowUser">
                <el-icon size="1.5vw"><User /></el-icon>
            </button>
            <button type="button" title="消息" @click="Message">
                <el-icon size="1.5vw"><Bell /></el-icon>
            </button>
        </div>
    </div>
    <div class="container">
        <div class="left">
            <div class="headline">
                <el-carousel height="20vw">
                    <el-carousel-item v-for="img in imgs" :key="img.id">
                        <img :src="img.url" alt="">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="post-container">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="关注" name="follow">
                        <div class="post-list">
                            <div class="post" v-for="item in 4" :key="item">
                                <div class="title">计算机再过几年会没落？</div>
                                <div class="summary">12年你会个python，在随便加一个技能，比如运维， 大部分公司会高薪聘请你。22年，你会个python ,再随便学一个技能，比如运维，你得求着公司，才偶尔有个面试机会。16年你会k8s, 大部分公司会高薪聘请你26年，你会k8s，大部分公司不care你。</div>
                                <div class="bottom">
                                    <div class="author">
                                        <div class="avatar">
                                            <img src="https://xhlj.oss-cn-hangzhou.aliyuncs.com/test/891a04034d374cd78907ff95abdc6477%E7%85%A7%E7%89%87.jpg" alt="">
                                        </div>
                                        <div class="nickname">匿名剑客</div>
                                    </div>
                                    <div class="interact">
                                        <button type="button" title="浏览" @click="gotoDetail">
                                            <el-icon size="1.2vw"><View /></el-icon>
                                        </button>
                                        <button type="button" title="评论" @click="Comment">
                                            <el-icon size="1.2vw"><ChatDotRound /></el-icon>
                                        </button>
                                        <button type="button" title="收藏" @click="Collect">
                                            <el-icon size="1.2vw"><Star /></el-icon>
                                        </button>
                                        <button type="button" title="分享" @click="Transport">
                                            <el-icon size="1.2vw"><Share /></el-icon>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="推荐" name="recommend">
                        <div class="post-list">
                            <div class="post" v-for="item in 5" :key="item">
                                <div class="title">计算机再过几年会没落？</div>
                                <div class="summary">12年你会个python，在随便加一个技能，比如运维， 大部分公司会高薪聘请你。22年，你会个python ,再随便学一个技能，比如运维，你得求着公司，才偶尔有个面试机会。16年你会k8s, 大部分公司会高薪聘请你26年，你会k8s，大部分公司不care你。</div>
                                <div class="bottom">
                                    <div class="author">
                                        <div class="avatar">
                                            <img src="https://xhlj.oss-cn-hangzhou.aliyuncs.com/test/891a04034d374cd78907ff95abdc6477%E7%85%A7%E7%89%87.jpg" alt="">
                                        </div>
                                        <div class="nickname">匿名剑客</div>
                                    </div>
                                    <div class="interact">
                                        <button type="button" title="浏览">
                                            <el-icon size="1.2vw"><View /></el-icon>
                                        </button>
                                        <button type="button" title="评论" @click="Comment">
                                            <el-icon size="1.2vw"><ChatDotRound /></el-icon>
                                        </button>
                                        <button type="button" title="收藏" @click="Collect">
                                            <el-icon size="1.2vw"><Star /></el-icon>
                                        </button>
                                        <button type="button" title="分享" @click="Transport">
                                            <el-icon size="1.2vw"><Share /></el-icon>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="热门" name="hot">
                        <div class="post-list">
                            <div class="post" v-for="item in 6" :key="item">
                                <div class="title">计算机再过几年会没落？</div>
                                <div class="summary">12年你会个python，在随便加一个技能，比如运维， 大部分公司会高薪聘请你。22年，你会个python ,再随便学一个技能，比如运维，你得求着公司，才偶尔有个面试机会。16年你会k8s, 大部分公司会高薪聘请你26年，你会k8s，大部分公司不care你。</div>
                                <div class="bottom">
                                    <div class="author">
                                        <div class="avatar">
                                            <img src="https://xhlj.oss-cn-hangzhou.aliyuncs.com/test/891a04034d374cd78907ff95abdc6477%E7%85%A7%E7%89%87.jpg" alt="">
                                        </div>
                                        <div class="nickname">匿名剑客</div>
                                    </div>
                                    <div class="interact">
                                        <button type="button" title="浏览">
                                            <el-icon size="1.2vw"><View /></el-icon>
                                        </button>
                                        <button type="button" title="评论" @click="Comment">
                                            <el-icon size="1.2vw"><ChatDotRound /></el-icon>
                                        </button>
                                        <button type="button" title="收藏" @click="Collect">
                                            <el-icon size="1.2vw"><Star /></el-icon>
                                        </button>
                                        <button type="button" title="分享" @click="Transport">
                                            <el-icon size="1.2vw"><Share /></el-icon>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div class="right">
            <div class="hot-search">
                <div class="search-top">
                    <div class="title">
                        实时热搜
                    </div>
                    <div class="refresh">
                        <span>刷新</span>
                        <button type="button" title="刷新">
                            <el-icon size="1.2vw"><Refresh /></el-icon>
                        </button>
                    </div>
                </div>
                <div class="search-list">
                    <ul>
                        <li v-for="item in search_items" :key="item.id">
                            <span class="num">{{ item.id }}</span>
                            <span class="title">{{ item.title }}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="create-center">
                <div class="center-top">
                    <div class="title">
                        创作中心
                    </div>
                </div>
                <div class="center-mid">
                    <span class="slogan">西湖论剑，等你参与！</span>
                </div>
                <div class="center-bottom">
                    <button title="发布帖子" @click="edit" style="cursor: pointer;">
                        发布帖子
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.nav{
    width: 100%;
    padding: 0.5vw 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid 1px #d2d2d7;
    .logo{
        width: 11.25vw;
        height: 5vw;
        background-color: blueviolet;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .search{
        width: 40vw;
        height: 2.5vw;
        border-radius: 1.0417vw;
        border: solid 1px #d2d2d7;
        align-items: center;
        display: flex;
        padding-left: .625vw;
        input{  
            border: none;
            margin-right: .625vw;
            width: 36.5vw;
            height: 2vw;
            font-size: 1.0417vw;
            color:rgb(36, 36, 36);
        }
    }
    .user{
        width: 10vw;
        height: 3vw;
        padding: 0 2vw;
        align-items: center;
        display: flex;
        justify-content: space-around;
        button{
            width: 2.5vw;
            height: 2.5vw;
            border: none;
            border-radius: 2.5vw;
            padding-left: 0.48vw;
            background-color: #fff;
        }
        button:hover{
            background-color: #d2d2d7;
        }
    }
}
.container{
    width: 100%;
    height: auto;
    display: flex;
    margin-top: 1vw;
    .left{
        width: 75%;
        height: auto;
        padding-right: 1vw;
        overflow: hidden;
        .headline{
            width: 100%;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .post-container{
            width: 100%;
            margin-top: 1vw;
            margin-bottom: 4vw;
            padding: 0.3vw 1vw;
            height: auto;
            overflow: hidden;
            border: #d2d2d7 solid 1px;
            .post-list{
                width: 100%;
                height: auto;
                .post{
                    width: 100%;
                    height: 10vw;
                    border-bottom: solid 1px #d2d2d7;
                    padding-top: 2vw;
                    .title{
                        width: 100%;
                        height: 2vw;
                        font-size: 1.0417vw;
                        font-weight: 700;
                    }
                    .summary{
                        width: 100%;
                        height: 3vw; 
                        font-size: .7292vw;
                        line-height: 1.4583vw;
                        overflow: hidden;
                    }
                    .bottom{
                        width: 100%;
                        height: 2vw; 
                        padding-top: 0.5vw;
                        display:flex;
                        justify-content: space-between;
                        .author{
                            width: 20vw;
                            height: 2vw;
                            display: flex;
                            align-items: center;
                            .avatar{
                                width:1.5vw;
                                height: 1.5vw;
                                border-radius: 1.5vw;
                                overflow:hidden;
                                img{
                                    width: 100%;
                                    height:100%;
                                }
                            }
                            .nickname{
                                width: 10vw;
                                height: 1.5vw;
                                margin-left: 1vw;
                                font-size: .7292vw;
                                color:#838383;
                                line-height: 1.4583vw;
                            }
                        }
                        .interact{
                            width: 20vw;
                            height: 2vw;
                            align-items: center;
                            display: flex;
                            justify-content: space-around;
                            button{
                                width: 2vw;
                                height: 2vw;
                                border: none;
                                border-radius: 2vw;
                                text-align:center;
                                display: block;
                                background-color: #fff;
                            }
                            button:hover{
                                background-color: #d2d2d7;
                            }
                        }
                    }
                }
            }
        }
    }
    .right{
        width: 25%;
        height: auto;
        .hot-search{
            width: 100%;
            height: auto;
            border: #d2d2d7 solid 1px;
            padding: 0 1vw;
            .search-top{
                width: 100%;
                height: 3.5vw;
                display: flex;
                justify-content: space-between;
                border-bottom: #d2d2d7 solid 1px;
                .title{
                    width: 60%;
                    height: 100%;
                    font-size: 1.25vw;
                    display:flex;
                    align-items: center;
                }
                .refresh{
                    width: 25%;
                    height: 100%;
                    display:flex;
                    align-items: center;
                    span{
                        width: 3vw;
                        font-size: .8333vw;
                        display: inline-block;
                        margin-right: 0.2vw;
                    }
                    button{
                        width: 2.5vw;
                        height: 2.5vw;
                        align-items: center;
                        display: flex;
                        border: none;
                        border-radius: 2.5vw;
                        background-color: #fff;
                    }
                }
            }
            .search-list{
                width:100%;
                height: auto;
                ul{
                    width:100%;
                    height: auto;
                    li{
                        width: 100%;
                        height: 3vw;
                        line-height: 3vw;
                        display:flex;
                        justify-content: space-between;
                        align-items: center;
                        .num{
                            width: 5%;
                            font-size: .8333vw;
                            color:#838383;
                        }
                        .title{
                            width: 90%;
                            font-size: .8333vw;
                        }
                    }
                    li:nth-child(1) .num{
                        color:rgb(255, 74, 74);
                    }
                    li:nth-child(2) .num{
                        color:rgb(255, 116, 74);
                    }
                    li:nth-child(3) .num{
                        color:rgb(255, 177, 74);
                    }
                }
            }
        }
        .create-center{
            width: 100%;
            height: 20vw;
            margin-top: 1vw;
            padding: 0 1vw;
            border: #d2d2d7 solid 1px;
            .center-top{
                width: 100%;
                height: 3.5vw;
                border-bottom: #d2d2d7 solid 1px;
                .title{
                    width: 60%;
                    height: 100%;
                    font-size: 1.25vw;
                    display:flex;
                    align-items: center;
                }
            }
            .center-mid{
                width: 100%;
                height: 10vw;
                margin-top:1vw;
                padding: 1vw;
                background-color: #ececec;
                .slogan{
                    font-size: 1.0417vw;
                    font-weight: 700;
                }
            }
            .center-bottom{
                width: 100%;
                height: 5vw;
                display: flex;
                align-items: center;
                button{
                    border-radius: 0%;
                    border: 1px solid #409eff;
                    width: 100%;
                    height:3vw;
                    background-color: #fff;
                    font-size: 1.0417vw;              
                    display: flex;  
                    align-items: center;  
                    justify-content: center;
                    color: #409eff;
                }
            }
        }    
    }
}

</style>

<script lang="ts" setup name="Forum">
import { ref } from 'vue';
import type { TabsPaneContext } from 'element-plus'
import { useRouter } from 'vue-router';
const searchQuery = ref('');
const searchResults = ref<string[]>([]);
const router = useRouter();
const gotoEdit = ()=>{
  console.log(123123)
  router.push('/forum/edit')
}
const gotoDetail = () => {  
    router.push('/forum/details');  
};
const route = useRouter();
const imgs = [
    {
        id: 1,
        url:'https://xhlj.oss-cn-hangzhou.aliyuncs.com/test/0b652404ed4143c5894ebc1d91ba0e68%E8%A5%BF%E6%B9%96.jpg'
    },
    {
        id: 2,
        url:'https://xhlj.oss-cn-hangzhou.aliyuncs.com/20%E5%A4%A7.jpg'
    },
    {
        id: 3,
        url:'https://xhlj.oss-cn-hangzhou.aliyuncs.com/test/0b652404ed4143c5894ebc1d91ba0e68%E8%A5%BF%E6%B9%96.jpg'
    },
    {
        id: 4,
        url:'https://xhlj.oss-cn-hangzhou.aliyuncs.com/20%E5%A4%A7.jpg'
    },
];

const search_items = [
    {
        id: 1,
        title: '勒索软件',
    },
    {
        id: 2,
        title: '恶意软件',
    },
    {
        id: 3,
        title: '社会工程',
    },
    {
        id: 4,
        title: '对数据的威胁',
    },
    {
        id: 5,
        title: '对可用性的威胁：拒绝服务',
    },
    {
        id: 6,
        title: '对可用性的威胁：Internet 威胁',
    },
    {
        id: 7,
        title: '显示信息–错误信息',
    },
    {
        id: 8,
        title: '供应链攻击',
    },
    {
        id: 9,
        title: '以地理为目标的网络钓鱼威胁',
    },
    {
        id: 10,
        title: '远程工作网络安全风险',
    },
];

const search = () => {
  // Simulate API call or local search functionality
  // Replace this with your actual search logic
  searchResults.value = searchQuery.value
    ? ['Result 1', 'Result 2', 'Result 3'] // Sample data, replace with actual search results
    : [];
};

const ShowUser = () => {
    route.push({path:'/forum/personal'})
};
function edit(){
    route.push({path:'/forum/edit'})
};

const Message = () => {
    console.log('Message');
};

const Comment = () => {
    console.log('Comment');
};

const Transport = () => {
    console.log('Transport');
};

const Collect = () => {
    console.log('Collect');
};

const activeName = ref('follow')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>
